<template>
	<view>
		<view class="uni-padding-wrap">
			<view class="uni-title">{{ year }}-{{ month }}-{{ day }}  {{ hour }}:{{ minute }}:{{ millisecond }}</view>
		</view>
		<picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange">
			<picker-view-column>
				<view class="item" v-for="(item, index) in years" :key="index">{{ item }}年</view>
			</picker-view-column>
			<picker-view-column>
				<view class="item" v-for="(item, index) in months" :key="index">{{ item }}月</view>
			</picker-view-column>
			<picker-view-column>
				<view class="item" v-for="(item, index) in days" :key="index">{{ item }}日</view>
			</picker-view-column>
			<picker-view-column>
				<view class="item" v-for="(item, index) in months" :key="index">{{ item }}时</view>
			</picker-view-column>
			<picker-view-column>
				<view class="item" v-for="(item, index) in minutes" :key="index">{{ item }}分</view>
			</picker-view-column>
			<picker-view-column>
				<view class="item" v-for="(item, index) in milliseconds" :key="index">{{ item }}秒</view>
			</picker-view-column>
		</picker-view>
	</view>
</template>

<script>
export default {
	data: function() {
		const date = new Date();
		
		console.log(date)
		const years = [];
		const year = date.getFullYear();
		const months = [];
		const month = date.getMonth() + 1;
		const days = [];
		const day = date.getDate();
		const hours = [];
		const hour = date.getHours();
		console.log(hour)
		const minutes = [];
		const minute = date.getMinutes();
		const milliseconds = [];
		const millisecond = date.getMilliseconds();
		for (let i = 1990; i <= date.getFullYear(); i++) {
			years.push(i);
		}
		for (let i = 1; i <= 12; i++) {
			months.push(i);
		}
		for (let i = 1; i <= 31; i++) {
			days.push(i);
		}
		for (let i = 1; i <= 24; i++) {
			hours.push(i);
		}
		for (let i = 1; i <= 59; i++) {
			minutes.push(i);
			milliseconds.push(i);
		}
		return {
			years,
			year,
			months,
			month,
			days,
			day,
			hours,
			hour,
			minutes,
			minute,
			milliseconds,
			millisecond,
			value: [9999, month - 1, day - 1],
			visible: true,
			indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth / (750 / 100))}px;`
		};
	},
	methods: {
		bindChange: function(e) {
			
			console.log(e)
			const val = e.detail.value;
			this.year = this.years[val[0]];
			this.month = this.months[val[1]];
			this.day = this.days[val[2]];
		}
	}
};
</script>

<style></style>
